:root {
  --theme-color: #08AE34;
  --theme-color-opacity-9: #08AE34e6;
  --theme-color-opacity-8: #08AE34cc;
  --theme-color-opacity-7: #08AE34BF;
  --theme-color-opacity-6: #08AE3499;
  --theme-color-opacity-5: #08AE3480;
  --theme-color-opacity-4: #08AE3466;
  --theme-color-opacity-3: #08AE344D;
  --theme-color-opacity-2: #08AE3433;
  --theme-color-opacity-1: #08AE341A;
   /* common */
   --silder-width: 260px;
   --page-content-bg: #fff;
   --page-bg: #f0f0f0;
   --page-color: #000; 
   --second-border-color: #efeff5;
   /* bf-logo */
   --logo-bg: #5d5f63;
   --logo-height: 60px;
   --logo-font-color: #fff;
   /* bf-menu */
   --menu-bg: #5d5f63;
   --menu-active-bg: var(--theme-color-opacity-3);
   --menu-hover-bg: var(--menu-active-bg);
   --menu-item-height: 42px;
   --menu-font-size: 1rem;
   --menu-font-color: #fff;
   --menu-active-font-color: var(--theme-color);
   
   /* bf-topbar */
   --topbar-bg: #ffffff;
   --topbar-font-color: #000;
   --topbar-height: 60px;
   /* bf-tabs */
   --tabs-bg: rgb(253, 253, 253);
   --tabs-font-color: #000;
   --tabs-height: 35px;

}

:root.dark {
   --page-content-bg: #10101499;
   --page-bg: #101014 !important;
   --page-color: #ffffffe2 !important; 
   --second-border-color: #efeff533 !important;
   /* bf-logo */
   --logo-bg: #18181c !important;
   --logo-font-color: #fff !important;
   /* bf-menu */
   --menu-bg: #18181c !important;
   --menu-active-bg: var(--theme-color-opacity-3) !important;
   --menu-hover-bg: var(--menu-active-bg) !important;
   --menu-font-color: #fff !important;
   --menu-active-font-color: var(--theme-color) !important;
   
   /* bf-topbar */
   --topbar-bg: #18181c !important;
   --topbar-font-color: #ffffff !important;
   /* bf-tabs */
   --tabs-bg: #18181c !important;
   --tabs-font-color: #ffffff !important;
}

.page {
   width: 100%;
   height: 100%;
   background-color: var(--page-content-bg);
   border: solid 1px var(--second-border-color);
   border-radius: 5px;
}

.bg-content {
   background-color: var(--page-content-bg);
}